<%@ page import="ar.com.photo_admin.domain.Event"%>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<meta name="layout" content="main">
	
	<!-- Bootstrap Image Gallery styles -->	
	<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap-image-gallery.min.css')}"
	type="text/css" />
</head>
<body>
	<div class="separator"></div>

	<g:if test="${flash.message}">
		<div class="alert alert-success">  
		  <a class="close" data-dismiss="alert">×</a>  
		  <div class="message">${flash.message}</div>  
		</div>  
	</g:if>
		
	<g:if test="${flash.warning}">
		<div class="alert alert-warning">  
		  <a class="close" data-dismiss="alert">×</a>  
		  <div class="message">${flash.warning}</div>  
		</div>  
	</g:if>
		
	<g:hasErrors bean="${event}">
		<g:eachError bean="${event}" var="error">
			<div id="signinErrors" class="alert alert-error">
				<a class="close" data-dismiss="alert">×</a>
				<g:message error="${error}" />
			</div>
		</g:eachError>
	</g:hasErrors>

	<div id="eventHeader" class="row">
		<div id="thumbnailContainer" class="span4">
			<g:if test="${event.coverPhoto}">
				<img id="coverPhotoImage"
					src="${event?.coverPhoto?.getPublishedUrl()}"
					class="coverPhoto thumbnail" name="${event?.coverPhoto?.id}"></img>
			</g:if>
			<g:else>
				<img id="coverPhotoImage"
					src="${resource(dir:'images', file: 'defaultImage.jpg')}"
					class="coverPhoto thumbnail" name="0"></img>
			</g:else>
		</div>

		<div class="span8">
			<div class="page-header">
				<h1><g:message code="event.label" />: ${event?.name}</h1>
			</div>

			<strong class="fr"><g:formatDate format="dd-MM-yyyy" date="${event?.eventDate}" /></strong>

			<div class="titleDescription">
				<p>${event?.description}</p>
			</div>
		</div>
	</div>
	
	<div class="separator"></div>

	<g:form class="event_buttons inlineBlock">
		<g:hiddenField name="id" value="${event?.id}" />
		
		<div class="btn-group">
			<g:isEventOwner eventId="${event?.id}">
				<g:link class="btn btn-success"
					controller="event"
					action="edit"
					params='[eventId:"${event?.id}"]'>
					<g:message code="event.edit" />
				</g:link>														
			</g:isEventOwner>
			
			<g:isEventClientOrOwner eventId="${event?.id}">
				<g:link class="btn btn-success" controller="eventAlbum"
					action="create"
					params='[eventId: "${event?.id}"]'>
					<g:message code="eventAlbum.newAlbum" />
				</g:link>	
			</g:isEventClientOrOwner>
			
			<g:link class="btn btn-success" 
				action="list">		
				<g:message code="event.seeAllEvents" />
			</g:link>
			
			<g:isEventClientOrOwner eventId="${event?.id}">
				<g:link class="btn btn-success" controller="eventAlbumToken"
					action="create" params='[id: "${event?.id}"]'>		
					<g:message code="event.share" />
				</g:link>
			
				<g:actionSubmit id="delete" action="delete" value=" " class="hidden"/>
				<a data-toggle="modal" href="#deleteEventModal" class="btn btn-danger">
					<g:message code="event.delete" />
				</a>
			</g:isEventClientOrOwner>
		</div>
	</g:form>
	
	<div class="btn-group sortBy">
		  <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
		    <g:message code="sort.sortBy" />
		    <span class="caret"></span>
		  </a>
		  
		  <ul class="dropdown-menu">
		  
	  		<g:each in="${sortStrategies}" var="strategy">
				<li>
					<a data-toggle="modal" href="${createLink(action: 'show', params: [sort: strategy.name(), order: strategy.order, id: event?.id])}">
						<i class="icon-ok ${strategy.name() != params.sort ? 'icon-white' : ''}"></i> ${message(code: 'sort.' + strategy)}
					</a>
				</li>
			</g:each>
		  
		  </ul>		  
	</div>
	
	<div class="separator"></div>

	<div class="row">

		<g:if test="${albums}">
			<g:each in="${albums}" var="album">
				<div id="albumContainer${album?.id}" class="span3 gridElement">
					<p>${album?.name}</p>

					<div class="gridImage">

						<g:link controller="eventAlbum" action="show" id="${album.id}">
							<g:if test="${album.coverPhoto}">
								<img
									src="${album?.coverPhoto?.getPublishedThumbnailMediumUrl()}"
									class="gridMediumImage img-rounded"></img>
							</g:if>
							<g:else>
								<img src="${resource(dir:'images', file: 'defaultImage.jpg')}"
									class="gridMediumImage img-rounded"></img>
							</g:else>
						</g:link>
					</div>
					<g:isEventClientOrOwner eventId="${event?.id}">
						<g:img class="gridBottomButton" id="album${album?.id}" title="${message(code: 'eventAlbum.deleteAlbum')}" data-toggle="modal" data-target="#deleteAlbumModal" dir="images" file="DeleteRed_s.png" />
					</g:isEventClientOrOwner>
				</div>
			</g:each>
		</g:if>
		<g:else>
			<div class="alert alert-warning">
				<a class="close" data-dismiss="alert">×</a>
				<div class="message">
					<g:message code="event.eventWithNoAlbums" />
				</div>
			</div>
		</g:else>
	</div>
	
	<g:form id="deleteAlbumForm" name="deleteAlbumForm" controller="event" action="deleteAlbum">		
		<g:hiddenField id="album_id" name="album_id" />
		<g:hiddenField name="event_id" value="${event?.id}" />
	</g:form>
   
   	<g:render template="/common/deleteConfirmationPopup" model='[button_text:"${message(code: 'eventAlbum.delete')}", msg:"${message(code: 'eventAlbum.delete.confirm')}", deleteConfirmButtonId:"deleteAlbumButtonConfirm", deleteModalId:"deleteAlbumModal"]'/>   
	<g:render template="/common/deleteConfirmationPopup" model='[button_text:"${message(code: 'event.delete')}", msg:"${message(code: 'event.delete.confirm')}", deleteConfirmButtonId:"deleteEventButtonConfirm", deleteModalId:"deleteEventModal"]'/>   
		
	<script type="text/javascript">	
       
		jQuery(document).ready(function(){
						
		    jQuery('.gridBottomButton').click(function () {		    		    	
		    	var albumId = jQuery(this).prop("id").replace("album","");		
				jQuery('#album_id').val(albumId);																					
		    });
	
			jQuery('#deleteAlbumButtonConfirm').click(function () {
				jQuery('#deleteAlbumForm').submit();
			});
			
			jQuery('#deleteEventButtonConfirm').click(function () {
				jQuery('#delete').click();
			});				
		});
	
    </script>	
</body>
</html>